<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>

    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="css/login.css">
    <link rel="stylesheet" href="layui-v2.8.18/layui/css/layui.css">
    <script src="js/jQuery.js"></script>

</head>
<body>
<!--导航栏-->
<div class="nav">
    <div class="layui-row">
        <div class="layui-col-md7">
            <div class="grid-demo grid-demo-bg1">
                <div>
                    <img src="image/cake.png" alt="">
                    <span>蛋糕商城</span>
                </div>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <!--                <img src="../image/index.png" alt="">-->
                <span>首页</span>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <button class="layui-btn layui-btn-primary demo-dropdown-base">
                    <span>下拉菜单</span>
                    <i class="layui-icon layui-icon-down layui-font-12"></i>
                </button>
            </div>
        </div>

        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <!--                <a href="blogPublish.html">-->
                <!--                <img src="images/write.png" alt="">-->
                <span>我的订单</span>
                </a>
            </div>
        </div>

        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="login.html">
                    <!--                    <img src="images/login.png" alt="">-->
                    <span>登录</span>
                </a>
            </div>
        </div>
        <div class="layui-col-md1">
            <div class="grid-demo grid-demo-bg1">
                <a href="register.html">
                    <!--                    <img src="images/register.png" alt="">-->
                    <span>注册</span>
                </a>
            </div>
        </div>
    </div>
</div>

<div class="login-container">
    <div class="login-center">
        <form class="layui-form" onsubmit="return false">
            <div class="demo-login-container">
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-username"></i>
                        </div>

                        <input type="text" name="fname" id="username" value="" lay-verify="required"
                               placeholder="用户名" lay-reqtext="请填写用户名"
                               autocomplete="off" class="layui-input" lay-affix="clear" required="required">

                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-wrap">
                        <div class="layui-input-prefix">
                            <i class="layui-icon layui-icon-password"></i>
                        </div>

                        <input type="password" name="fname" id="password" value="" lay-verify="required"
                               placeholder="密   码" required="required"
                               lay-reqtext="请填写密码" autocomplete="off" class="layui-input" lay-affix="eye">

                    </div>
                </div>
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-login" id="submit">登录
                    </button>
                </div>
            </div>
        </form>
    </div>
</div>

<script>
    let usernameInput = document.querySelector('#username');
    let passwordInput = document.querySelector('#password');
    let submit = document.querySelector('#submit');
    layui.use(function () {
        var dropdown = layui.dropdown;
        // 渲染
        dropdown.render({
            elem: '.demo-dropdown-base', // 绑定元素选择器，此处指向 class 可同时绑定多个元素
            data: [{
                title: 'menu item 1',
                id: 100
            }, {
                title: 'menu item 2',
                id: 101
            }, {
                title: 'menu item 3',
                id: 102
            }],
            click: function (obj) {
                this.elem.find('span').text(obj.title);
            }
        });
    });
    submit.onclick = function () {
        // 非空校验
        $.ajax({
            type: 'post',
            url: '/user/login',
            data: {
                username: usernameInput.value,
                password: passwordInput.value,
            },
            success: function (body) {
                // 登陆成功时
                // 先进行判断
                if (body && body.code === 200 && body.data != null) {
                    location.assign('/myblog.html');
                } else {
                    location.assign('/error.html');
                }
            },
            error: function () {
                alert('登录失败!');
            }
        });
    }
</script>
</body>
</html>